<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<base th:href="@{/}">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Toyqo - Kids Store Bootstrap 5 Template</title>

    <!-- Favicons -->
    <link rel="icon" th:href="@{assets/images/Shop.ico}">
    <link rel="stylesheet" th:href="@{assets/css/vendor/vendor.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/plugins/plugins.min.css}">
    <link rel="stylesheet" th:href="@{assets/css/style.min.css}">
    <!--设置星星样式-->
    <link rel="stylesheet" th:href="@{assets/css/star/star.css}">

</head>

<body>

<div th:include="head :: headname"></div>

<!-- Breadcrumb Section Start -->
<div class="section">

    <!-- Breadcrumb Area Start -->
    <div class="breadcrumb-area bg-primary">
        <div class="container">
            <div class="breadcrumb-content">
                <ul>
                    <li>
                        <a th:href="@{/goods/index}"><i class="fa fa-home"></i> </a>
                    </li>
                    <li class="active">商品评论</li>
                </ul>
            </div>
        </div>
    </div>
    <!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Area End -->

</div>
<!-- Breadcrumb Section End -->

<!-- Single Product Section Start -->
<div class="section section-margin">
    <div class="container">
        <div class="row">

            <div th:replace="leaf :: leafname"></div>

            <!-- Single Product Tab Start -->
            <div class="col-lg-9 single-product-tab">
                <ul class="nav nav-tabs" style="margin-left: 12px">
                    <li class="nav-item">
                        <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#connect-2" role="tab"
                           aria-selected="true">商品评论</a>
                    </li>
                </ul>

                <!--  数据填充-->
                <div class="tab-content mb-text" id="myTabContent">
                    <div class="tab-pane fade active show" id="connect-2" role="tabpanel" aria-labelledby="profile-tab">
                        <!-- 作为商品评论展示 -->
                        <div th:if="${product !=null} and ${comment==null}">
                            <div class="product_tab_content border p-3">
                                <!--商品信息-->
                                <div class="single-review d-flex mb-4">
                                    <!-- Review Thumb Start -->
                                    <div class="review_thumb">
                                        <img style="position:relative; margin-left: -15px; overflow: hidden"
                                             alt="review images" th:src="@{ ${product.pic} }">
                                    </div>
                                    <!-- Review Thumb End -->

                                    <!-- Review Details Start -->
                                    <div class="review_details" style="position:relative; margin-left: -20px">
                                        <div class="review_info mb-2">

                                            <!-- Rating Start -->
                                            <span class="ratings justify-content-start mb-3">
                                             <span class="rating-wrap">
                                                  <span class="star" th:if="${score==0}" style="width:0%"></span>
                                                  <span class="star" th:if="${score==1}" style="width:20%"></span>
                                                  <span class="star" th:if="${score==2}" style="width:40%"></span>
                                                  <span class="star" th:if="${score==3}" style="width:60%"></span>
                                                  <span class="star" th:if="${score==4}" style="width:80%"></span>
                                                  <span class="star" th:if="${score==5}" style="width:100%"></span>
                                            </span>
                                            <span class="rating-num">商品综合评价</span>
                                            </span>
                                            <!-- Rating End -->

                                            <!-- Review Title & Date Start -->
                                            <div class="review-title-date">
                                                <h5 class="title"
                                                    th:text="${product.brandName!=null?product.brandName:'未知品牌'}"></h5>
                                                <span th:text="' '+${product.name}" style="float:left;"></span>
                                                <span class="rating-num" th:text="${product.price}+'￥'"
                                                      style="float:left;margin-left: 20px"></span><br>
                                                <p th:text="'商品标题:'+' '+${product.subTitle}"></p>
                                                <p th:text="'商品描述:'+' '+${product.description}"></p>
                                            </div>
                                            <!-- Review Title & Date End -->
                                        </div>
                                    </div>
                                </div>
                                <!--商品信息-->

                                <!-- 五星评级 --> <br>
                                <div class="rating_wrap">
                                    <ul class="nav nav-tabs" role="tablist">
                                        <li class="nav-item">
                                            <a class="nav-link">您的评级</a>
                                        </li>
                                    </ul>
                                    <!-- Rating Start -->
                                    <!-- Rating End 111-->
                                    <ul class="navstar  " id="navsss">
                                        <li class="onestart"><a href="javascript:void(0)" title="1分">1分</a></li>
                                        <li class="twostart"><a href="javascript:void(0)" title="2分">2分</a></li>
                                        <li class="threestart"><a href="javascript:void(0)" title="3分">3分</a></li>
                                        <li class="fourstart"><a href="javascript:void(0)" title="4分">4分</a></li>
                                        <li class="fivestart"><a href="javascript:void(0)" title="5分">5分</a></li>
                                    </ul>

                                </div>
                                <!-- 五星评级 -->

                                <!-- 添加评论 -->
                                <div class="comments-area comments-reply-area">
                                    <div class="row">
                                        <div class="col-lg-12 col-custom">

                                            <form th:action="@{/order/docomment}" method="post" class="comment-form-area">
                                                <div class="row comment-input" hidden>
                                                    <!-- 隐藏input -->
                                                    <div class="col-md-6 col-custom comment-form-emai mb-3">
                                                        <input type="text" required="required" name="productId"
                                                               th:value="${product.id}">
                                                        <input type="text" name="productName"
                                                               th:value="${product.name}">

                                                        <input type="number" required="required" name="id"
                                                               th:value="0">
                                                        <input type="number" required="required" name="memberIp"
                                                               th:value="${userInfo !=null? userInfo.id:0}">
                                                        <input type="number" id="star" required="required" name="star"
                                                               th:value="0">
                                                        <input type="number" required="required" name="showStatus"
                                                               th:value="1">
                                                    </div>
                                                    <!-- Input End -->
                                                </div>

                                                <!-- Comment Texarea Start -->
                                                <div class="comment-form-comment mb-3">
                                                    <ul class="nav nav-tabs" role="tablist">
                                                        <li class="nav-item">
                                                            <a class="nav-link">添加评论</a>
                                                        </li>
                                                    </ul>
                                                    <p class="mb-2">评论字数5-30个字符为宜~ </p>
                                                    <textarea class="comment-notes" required="required"
                                                              name="content"></textarea>
                                                </div>
                                                <!-- Comment Texarea End -->

                                                <!-- Comment Submit Button Start -->
                                                <div class="comment-form-submit" style="margin-left:42%">
                                                    <button class="btn btn-dark btn-hover-primary">提交</button>
                                                </div>
                                                <!-- Comment Submit Button End -->

                                            </form>
                                            <!-- Comment form End -->
                                        </div>
                                    </div>
                                </div>
                                <!-- Comments ans Replay End -->
                            </div>

                        </div> <!-- th:if判断1 end -->

                        <!-- 作为评论详情展示 -->
                        <div th:if="${product !=null and comment!=null}">
                            <div class="product_tab_content border p-3">
                                <!--商品信息-->
                                <div class="single-review d-flex mb-4">
                                    <!-- Review Thumb Start -->
                                    <div class="review_thumb">
                                        <img style="position:relative; margin-left: -15px; overflow: hidden"
                                             alt="review images" th:src="@{ ${product.pic} }">
                                    </div>
                                    <!-- Review Thumb End -->

                                    <!-- Review Details Start -->
                                    <div class="review_details" style="position:relative; margin-left: -20px">
                                        <div class="review_info mb-2">

                                            <!-- Rating Start -->
                                            <span class="ratings justify-content-start mb-3">
                                             <span class="rating-wrap">
                                                  <span class="star" th:if="${score==0}" style="width:0%"></span>
                                                  <span class="star" th:if="${score==1}" style="width:20%"></span>
                                                  <span class="star" th:if="${score==2}" style="width:40%"></span>
                                                  <span class="star" th:if="${score==3}" style="width:60%"></span>
                                                  <span class="star" th:if="${score==4}" style="width:80%"></span>
                                                  <span class="star" th:if="${score==5}" style="width:100%"></span>
                                            </span>
                                            <span class="rating-num">商品综合评价</span>
                                            </span>
                                            <!-- Rating End -->

                                            <!-- Review Title & Date Start -->
                                            <div class="review-title-date">
                                                <h5 class="title"
                                                    th:text="${product.brandName!=null?product.brandName:'未知品牌'}"></h5>
                                                <span th:text="' '+${product.name}" style="float:left;"></span>
                                                <span class="rating-num" th:text="${product.price}+'￥'"
                                                      style="float:left;margin-left: 20px"></span> <br>
                                                <p style="float:none" th:text="'商品标题:'+' '+${product.subTitle}"></p>
                                                <p th:text="'商品描述:'+' '+${product.description}"></p>
                                            </div>
                                            <!-- Review Title & Date End -->
                                        </div>
                                    </div>
                                </div>

                                <!--评论信息-->
                                <div class="comments-area comments-reply-area">
                                    <div class="row">
                                        <div class="col-lg-12 col-custom">

                                            <!-- Comment Texarea Start -->
                                            <div class="comment-form-comment mb-3">
                                                <ul class="nav nav-tabs" role="tablist">
                                                    <li class="nav-item">
                                                        <a class="nav-link">评论内容</a>
                                                    </li>
                                                </ul>
                                                <textarea class="comment-notes" th:text="${comment.content}"
                                                          name="content"></textarea>
                                            </div>
                                            <!-- Comment Texarea End -->

                                            <!-- Comment Submit Button Start -->
                                            <div class="comment-form-submit" style="margin-left:42%">
                                                <a href="javascript:history.back(-1)"><button class="btn btn-dark btn-hover-primary"style="color: #f0f0f0">返回</button></a>
                                            </div>
                                            <!-- Comment Submit Button End -->

                                            <!-- Comment form End -->
                                        </div>
                                    </div>
                                </div>
                                <!-- Comments ans Replay End -->
                            </div>

                        </div> <!-- th:if判断2 end -->

                        <!-- 后台响应类型监听 -->
                        <div th:text="${msg}" id="msg" style="display:none"></div>
                        <!-- 存储用户登录信息 -->
<!--                        <div  th:text="${userInfo==null?1:userInfo.id}" id="userInfo" style="display:none"></div>-->

                    </div>
                </div>
            </div>
        </div>
        <!-- Single Product Tab End -->
    </div>
</div>
</div>
<!-- Single Product Section End -->

<!-- Footer Section Start -->
<div th:replace="footer :: footerS"></div>
<!-- Footer Section End -->


<script th:src="@{assets/js/vendor.min.js}"></script>
<script th:src="@{assets/js/plugins.min.js}"></script>

<!--Main JS-->
<script th:src="@{assets/js/main.js}"></script>

<!--星星JS代码-->
<script>
    window.onload = function () {
        oUl = document.getElementById("navsss");
        star = document.getElementById("star");
        lis = oUl.getElementsByTagName("li");
        console.log(lis.length);
        for (var i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                oUl.className = "navstar  " + this.className;
                console.log(oUl.className);
                var score = this.getElementsByTagName("a")[0].title;
                // alert("评分是：" + score);
                $("#star").val(parseInt(score.substring(0, 1)));
            }
        }

    }
</script>
<script>
    $(document).ready(function () {
        // var msg = document.getElementById("msg");
        // var message = msg.text;

        var message = $("#msg").html();

        // var memberIP = $("#userInfo").html();
        // console.log("memberIP:"+memberIP)

        if ("200" == message) {
            // location.replace("allcomment?memberIP=" + memberIP);
            location.replace("/order/allcomment");
            alert("评论成功，感谢您！");
        }
        if ("300"==message){
            location.replace("/order/allcomment");
            alert("您已评论过该商品！");
        }
        if ("400" == message) {
            location.replace("/order/allOrder");
            alert("评论失败，请稍后尝试！");
        }

        $("#msg").html(0);
    })

</script>

</body>
</html>